import React, { memo,useEffect } from 'react'
import {shallowEqual, useDispatch,useSelector} from 'react-redux';

import ThemeHeaderRCM from '@/components/theme-header-rcm';
import SongsCover from '@/components/songs-cover';

// import {HOT_RECOMMEND_LIMIT} from '@/common/constants';

import {RecommendWrapper} from './style';
import { getHotRecommendAction } from '../../store/actionCreators';

export default memo(function HotRecommend() {


    const {hotRecommends} = useSelector(state => ({
        hotRecommends:state.getIn(["recommend" , "hotRecommends"])
    }),shallowEqual)

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getHotRecommendAction(8))
    }, [dispatch])


    return (
        <RecommendWrapper>
            <ThemeHeaderRCM title="热门推荐" keywords={["华语","流行","民谣","摇滚","电子"]}/>
            <div className="recommend-list">
                {
                    hotRecommends.map((item,index)=>{
                        return(
                            <SongsCover key={item.id} info={item}></SongsCover>
                        )
                    })
                }
            </div>
        </RecommendWrapper>
    )
})
